(function(window) {

	function gridcontroller(data) {

		var canvas = document.getElementById(data.root);
		var ctx = canvas.getContext("2d");

		ctx.lineWidth = 0.5;
		ctx.strokeStyle = data.color;

		// horizontal grid lines
		for ( var i = 0; i <= canvas.height; i = i + data.gridPixelSize) {
			ctx.beginPath();
			ctx.moveTo(0, i);
			ctx.lineTo(canvas.width, i);
			if (i % parseInt(data.grap) == 0) {
				ctx.lineWidth = 2;
			} else {
				ctx.lineWidth = 0.5;
			}
			ctx.closePath();
			ctx.stroke();
		}

		// vertical grid lines
		for ( var j = 0; j <= canvas.width; j = j + data.gridPixelSize) {
			ctx.beginPath();
			ctx.moveTo(j, 0);
			ctx.lineTo(j, canvas.height);
			if (j % parseInt(data.grap) == 0) {
				ctx.lineWidth = 2;
			} else {
				ctx.lineWidth = 0.5;
			}
			ctx.closePath();
			ctx.stroke();
		}

	}

	window.gridcontroller = gridcontroller;
})(window);


gridcontroller({
	gridPixelSize : 10,
	color : "#EEEEEE",
	grap : 50,
	root : constants_id_grid
});
